*{
    margin:0;
    padding: 0;
}

.container--WG2nC {
    display: flex;
    height: 100vh;
    background-image: url('../images/login/bg2.jpg');
}

.container--WG2nC .banner--mJvtB {    
    width: 0px;   
    background-size: 100%,100%;
    background-repeat: no-repeat;
}

.container--WG2nC .content--SpTpV {
    flex: 1 1;
    padding-bottom: 30px;
    position: relative;
    background-image: url(~/images/轮播/北欧风.jpg);  
    background-repeat: no-repeat;
    
}

.container--WG2nC .footer--JLV2w {
    bottom: 0;
    position: absolute;
    right: 0;
    width: 100%
}
.logo--dYrt2 {
    align-items: center;
    display: inline-flex;
    left: 22px;
    position: fixed;
    top: 24px;
    z-index: 1
}
.carousel-sub-title--CrwtW {
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    margin-top: 8px
}
.carousel--rDlWr {
    height: 100%
}

.carousel-title--HgUWi {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px
}


.carousel-item--gNB19 {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center
}

.carousel-image--pC8vM {
    margin-top: 30px;
    width: 320px
}

.logo-text--zklz_ {
    color: #fff;
    font-size: 20px;
    margin-left: 4px;
    margin-right: 4px
}

.banner--mJvtB {
    /* 左边方块 */
    width: 0%;
    align-items: center;
    display: flex;
    justify-content: center
}
.banner-inner--WqrBf {
    flex: 1 1;
    height: 100%
}

@keyframes arco-carousel-slide-x-in {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes arco-carousel-slide-x-out {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

@keyframes arco-carousel-slide-x-in-reverse {
    from {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes arco-carousel-slide-x-out-reverse {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(100%)
    }
}

@keyframes arco-carousel-slide-y-in {
    from {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes arco-carousel-slide-y-out {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-100%)
    }
}

@keyframes arco-carousel-slide-y-in-reverse {
    from {
        transform: translateY(-100%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes arco-carousel-slide-y-out-reverse {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(100%)
    }
}

@keyframes arco-carousel-card-bottom-to-middle {
    from {
        opacity: 0;
        transform: translateX(0%) translateZ(-400px)
    }

    to {
        opacity: .4;
        transform: translateX(0%) translateZ(-200px)
    }
}

@keyframes arco-carousel-card-middle-to-bottom {
    from {
        opacity: .4;
        transform: translateX(-100%) translateZ(-200px)
    }

    to {
        opacity: 0;
        transform: translateX(-100%) translateZ(-400px)
    }
}

@keyframes arco-carousel-card-top-to-middle {
    from {
        opacity: 1;
        transform: translateX(-50%) translateZ(0)
    }

    to {
        opacity: .4;
        transform: translateX(-100%) translateZ(-200px)
    }
}

@keyframes arco-carousel-card-middle-to-top {
    from {
        opacity: .4;
        transform: translateX(0) translateZ(-200px)
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateZ(0)
    }
}

@keyframes arco-carousel-card-bottom-to-middle-reverse {
    from {
        opacity: 0;
        transform: translateX(-100%) translateZ(-400px)
    }

    to {
        opacity: .4;
        transform: translateX(-100%) translateZ(-200px)
    }
}

@keyframes arco-carousel-card-middle-to-bottom-reverse {
    from {
        opacity: .4;
        transform: translateX(0%) translateZ(-200px)
    }

    to {
        opacity: 0;
        transform: translateX(0%) translateZ(-400px)
    }
}

@keyframes arco-carousel-card-top-to-middle-reverse {
    from {
        opacity: 1;
        transform: translateX(-50%) translateZ(0)
    }

    to {
        opacity: .4;
        transform: translateX(0%) translateZ(-200px)
    }
}

@keyframes arco-carousel-card-middle-to-top-reverse {
    from {
        opacity: .4;
        transform: translateX(-100%) translateZ(-200px)
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateZ(0)
    }
}

.arco-carousel {
    position: relative
}

.arco-carousel-indicator-position-outer {
    margin-bottom: 30px
}

.arco-carousel-slide,
.arco-carousel-card,
.arco-carousel-fade {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative
}

    .arco-carousel-slide > *,
    .arco-carousel-card > *,
    .arco-carousel-fade > * {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden
    }

.arco-carousel-item-current {
    z-index: 1
}

.arco-carousel-slide > *:not(.arco-carousel-item-current) {
    visibility: hidden
}

.arco-carousel-slide.arco-carousel-horizontal .arco-carousel-item-slide-out {
    display: block;
    animation: arco-carousel-slide-x-out
}

.arco-carousel-slide.arco-carousel-horizontal .arco-carousel-item-slide-in {
    display: block;
    animation: arco-carousel-slide-x-in
}

.arco-carousel-slide.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-slide-out {
    animation: arco-carousel-slide-x-out-reverse
}

.arco-carousel-slide.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-slide-in {
    animation: arco-carousel-slide-x-in-reverse
}

.arco-carousel-slide.arco-carousel-vertical .arco-carousel-item-slide-out {
    display: block;
    animation: arco-carousel-slide-y-out
}

.arco-carousel-slide.arco-carousel-vertical .arco-carousel-item-slide-in {
    display: block;
    animation: arco-carousel-slide-y-in
}

.arco-carousel-slide.arco-carousel-vertical.arco-carousel-negative .arco-carousel-item-slide-out {
    animation: arco-carousel-slide-y-out-reverse
}

.arco-carousel-slide.arco-carousel-vertical.arco-carousel-negative .arco-carousel-item-slide-in {
    animation: arco-carousel-slide-y-in-reverse
}

.arco-carousel-card {
    perspective: 800px
}

    .arco-carousel-card > * {
        left: 50%;
        opacity: 0;
        transform: translateX(-50%) translateZ(-400px);
        animation: arco-carousel-card-middle-to-bottom
    }

    .arco-carousel-card .arco-carousel-item-prev {
        opacity: .4;
        transform: translateX(-100%) translateZ(-200px);
        animation: arco-carousel-card-top-to-middle
    }

    .arco-carousel-card .arco-carousel-item-next {
        opacity: .4;
        transform: translateX(0%) translateZ(-200px);
        animation: arco-carousel-card-bottom-to-middle
    }

    .arco-carousel-card .arco-carousel-item-current {
        opacity: 1;
        transform: translateX(-50%) translateZ(0);
        animation: arco-carousel-card-middle-to-top
    }

    .arco-carousel-card.arco-carousel-negative > * {
        animation: arco-carousel-card-middle-to-bottom-reverse
    }

    .arco-carousel-card.arco-carousel-negative .arco-carousel-item-prev {
        animation: arco-carousel-card-bottom-to-middle-reverse
    }

    .arco-carousel-card.arco-carousel-negative .arco-carousel-item-next {
        animation: arco-carousel-card-top-to-middle-reverse
    }

    .arco-carousel-card.arco-carousel-negative .arco-carousel-item-current {
        animation: arco-carousel-card-middle-to-top-reverse
    }

.arco-carousel-fade > * {
    left: 50%;
    transform: translateX(-50%);
    opacity: 0
}

.arco-carousel-fade .arco-carousel-item-current {
    opacity: 1
}

.arco-carousel-indicator {
    display: flex;
    position: absolute;
    margin: 0;
    padding: 0
}

.arco-carousel-indicator-wrapper {
    position: absolute;
    z-index: 2
}

.arco-carousel-indicator-wrapper-top {
    left: 0;
    right: 0;
    top: 0;
    height: 48px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 87%)
}

.arco-carousel-indicator-wrapper-bottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.15) 100%)
}

.arco-carousel-indicator-wrapper-left {
    left: 0;
    top: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 87%)
}

.arco-carousel-indicator-wrapper-right {
    right: 0;
    top: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.15) 100%)
}

.arco-carousel-indicator-wrapper-outer {
    left: 0;
    right: 0;
    background: none
}

.arco-carousel-indicator-bottom {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%)
}

.arco-carousel-indicator-top {
    top: 12px;
    left: 50%;
    transform: translateX(-50%)
}

.arco-carousel-indicator-left {
    left: 12px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg)
}

.arco-carousel-indicator-right {
    right: 12px;
    top: 50%;
    transform: translate(50%, -50%) rotate(90deg)
}

.arco-carousel-indicator-outer {
    left: 50%;
    transform: translateX(-50%);
    padding: 4px;
    border-radius: 20px;
    background-color: transparent
}

    .arco-carousel-indicator-outer.arco-carousel-indicator-dot {
        bottom: -22px
    }

    .arco-carousel-indicator-outer.arco-carousel-indicator-line {
        bottom: -20px
    }

    .arco-carousel-indicator-outer.arco-carousel-indicator-slider {
        padding: 0;
        bottom: -16px;
        background-color: rgba(var(--gray-4), .5)
    }

    .arco-carousel-indicator-outer .arco-carousel-indicator-item {
        background-color: rgba(var(--gray-4), .5)
    }

        .arco-carousel-indicator-outer .arco-carousel-indicator-item:hover,
        .arco-carousel-indicator-outer .arco-carousel-indicator-item-active {
            background-color: var(--color-fill-4)
        }

.arco-carousel-indicator-item {
    display: inline-block;
    border-radius: var(--border-radius-medium);
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer
}

    .arco-carousel-indicator-item:hover,
    .arco-carousel-indicator-item-active {
        background-color: var(--color-white)
    }

.arco-carousel-indicator-dot .arco-carousel-indicator-item {
    width: 6px;
    height: 6px;
    border-radius: 50%
}

    .arco-carousel-indicator-dot .arco-carousel-indicator-item:not(:last-child) {
        margin-right: 8px
    }

.arco-carousel-indicator-line .arco-carousel-indicator-item {
    width: 12px;
    height: 4px
}

    .arco-carousel-indicator-line .arco-carousel-indicator-item:not(:last-child) {
        margin-right: 8px
    }

.arco-carousel-indicator-slider {
    width: 48px;
    height: 4px;
    border-radius: var(--border-radius-medium);
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer
}

    .arco-carousel-indicator-slider .arco-carousel-indicator-item {
        position: absolute;
        top: 0;
        height: 100%;
        transition: left .3s
    }

.arco-carousel-arrow > div {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    z-index: 2
}

    .arco-carousel-arrow > div > svg {
        color: var(--color-white);
        font-size: 14px
    }

    .arco-carousel-arrow > div:hover {
        background-color: rgba(255, 255, 255, 0.5)
    }

.arco-carousel-arrow-left {
    left: 12px;
    top: 50%;
    transform: translateY(-50%)
}

.arco-carousel-arrow-right {
    top: 50%;
    transform: translateY(-50%);
    right: 12px
}

.arco-carousel-arrow-top {
    left: 50%;
    transform: translateX(-50%);
    top: 12px
}

.arco-carousel-arrow-bottom {
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px
}

.arco-carousel-arrow-hover div {
    opacity: 0;
    transition: all .3s
}

.arco-carousel:hover .arco-carousel-arrow-hover div {
    opacity: 1
}


.login-form-sub-title--zvIQu {
    color: rgb(61, 61, 61);
    font-size: 16px;
    line-height: 24px
}

.login-form-error-msg--SUMWl {
    color: rgb(var(--red-6));
    height: 32px;
    line-height: 32px
}

.login-form-password-actions--T5Gob {
    display: flex;
    justify-content: space-between
}

.login-form-register-btn--ox3oX {
    color: var(--color-text-3) !important
}

.container--WG2nC .footer--JLV2w {
   display: flex;
    justify-content: center;
    align-items: center;
margin-bottom: 30px;
}

/*��ť*/
.arco-btn-primary:not(.arco-btn-disabled) {
    background-color: rgb(var(--primary-6));
    color: #fff;
    border: 1px solid transparent;
}
.arco-btn-size-default {
    padding: 0 15px;
    font-size: 14px;
    height: 32px;
    border-radius: var(--border-radius-small);
}

.arco-btn-long {
    display: block;
    width: 100%;
}

.arco-btn {
    display: inline-block;
    position: relative;
    outline: none;
    font-weight: 400;    
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .1s cubic-bezier(0, 0, 1, 1);
    box-sizing: border-box;
    line-height: 1.5715;
}

button, input {
    overflow: visible;
}


.content--SpTpV {
    align-items: center;
    display: flex;
    justify-content: center;
}


.arco-input-inner-wrapper {
    outline: none;    
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border-radius: var(--border-radius-small);
    color: var(--color-text-1);
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
    box-sizing: border-box;
    transition: color .1s cubic-bezier(0, 0, 1, 1), border-color .1s cubic-bezier(0, 0, 1, 1), background-color .1s cubic-bezier(0, 0, 1, 1);
    border: 1px solid transparent;
    background-color: var(--color-fill-2);
    display: inline-flex;
    width: 100%;
    position: relative;
    align-items: center;
}

.arco-form-layout-vertical {
    display: block;
}

.arco-form-item-control-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
}

.arco-form-item-control {
    display: flex;
    align-items: center;
    min-height: 32px;
    width: 100%;
    background-color: rgb(242, 243, 245);
}


.arco-form-item-control-children {
    position: relative;
}

.arco-form-item-control-children {
    width: 100%;
    flex: 1;
}
.login-form-wrapper--l8sv0 {
    width: 320px;
    padding: 30px;
    border-radius: 20px; 
    position: relative;
    background-color: rgba(233, 240, 255, 0.7);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) inset;
    position: absolute;
    right: 15%;
    top: 20%;

}


.arco-form-item {
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: rgb(242, 243, 245);
}

.arco-form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.arco-form-item-control {
    display: flex;
    align-items: center;
    min-height: 32px;
    width: 100%;
}

.userName_input{
    background-color: rgb(242, 243, 245);
}

.arco-input {
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.5715;
    outline: none;   
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
    border-radius: var(--border-radius-small);
    color: var(--color-text-1);
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
    box-sizing: border-box;
    transition: color .1s cubic-bezier(0, 0, 1, 1), border-color .1s cubic-bezier(0, 0, 1, 1), background-color .1s cubic-bezier(0, 0, 1, 1);
    border: 1px solid transparent;
    background-color: var(--color-fill-2)
}


/* 忘记密码 */
.arco-link {
    color: #165DFF;
    font-size: 14px;
    line-height: 1.5715;
    display: inline-block;
    padding: 1px 4px;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--border-radius-small);
    background-color: transparent;
    transition: all .1s cubic-bezier(0, 0, 1, 1)
}

/* 登录按钮 */
.arco-btn-primary:not(.arco-btn-disabled) {
    background-color: rgb(22, 93, 255);
    color: #fff;
    border: 1px solid transparent;
}

.arco-btn-size-default {
    padding: 0 15px;
    font-size: 14px;
    height: 32px;}


    
.arco-btn-text:not(.arco-btn-disabled) {
    background-color: #FDFDFD89;
    color: rgb(var(--primary-6));
    margin-top: 15PX;
    border: 1px solid transparent
}

.login-form-error-msg--SUMWl ul li {
    list-style: none;
    color: #e70014;
    font-size: 13px;
    margin-top: 15px;
    animation: shake 1s ;
    /*display:none;*/   
  /*  opacity:0;*/
}

@keyframes shake {
    0% {
        transform: translateX(0);
      /*  opacity: 1;*/
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }

    20%, 40%, 60%, 80%, 100% {
        transform: translateX(10px);
    }
   /* 100%{
        opacity:1;
    }*/
}

